<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>规格表格</title>  
<style>  
    body {  
        font-family: Arial, sans-serif;  
    }  
      
    table {  
        width: 90%;
        margin: 0px auto;
        border-collapse: collapse;  
        margin-top: 20px;  
    }  
    
    th, td {  
        padding: 10px;  
        text-align: left;  
        border-bottom: 1px solid #ddd;  
    }  
    
    th {  
        background-color: #f2f2f2;  
        font-weight: bold;  
    }  
      
    tr:nth-child(even) {  
        background-color: #f9f9f9;  
    }  
      
    table, th, td {  
        border: 1px solid #ccc;  
    }  
      
    th, td {  
        padding: 5px;
        text-align: center;
    }  
      
    /* 添加一些间距 */  
    th, td {  
        white-space: nowrap;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        
    }  
    .pagination{
        list-style: none;
        margin: 0px;
    }
    .pagination li{
        display: inline-block;
        margin: 0px 10px;
        text-align: center;
    }
    .pagination li a{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        padding:5px 10px;
        display: block;
        background-color: #666;
        text-decoration: none;
        color: #f9f9f9;
    }
    .pagination li span{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        padding:5px 10px;
        display: block;
        color: #000;
        background-color: #f1f1f1;
    }
    .upload-xlsx{
        background-color: #1c8556;
        border: 1px solid #666;
        border-radius: 5px;
        padding :5px 10px;
        color: #eee;
        text-align: center;
        width: 140px;
        height: 40px;
        line-height: 30px;
        font-size: 18px;
    }
</style>  
</head>  
<body>  
  
<h2>规格表格</h2>  
<button class="upload-xlsx" onclick="set_data()">上传数据</button>
<input type="file" id="file-input" style="display: none;">
<script>
    function set_data(){

    }
</script>
<table>  
    <thead>  
        <tr>  
            <th>规格</th>  
            <th>压力</th>  
            <th>配管</th>  
            <th>密封面</th>  
            <th>外径</th>  
            <th>内径</th>  
            <th>偏厚</th>  
            <th>台阶直径</th>  
            <th>台阶高度</th>  
            <th>孔数</th>  
            <th>孔径</th>  
            <th>锻压毛胚重量</th>  
        </tr>  
    </thead>  
    <tbody>
        {volist name="list" id="value"}
        <tr>
            <td>{$value.attr}</td>
            <td>{$value.pressure}</td>
            <td>{$value.piping}</td>
            <td>{$value.ss}</td>
            <td>{$value.waijin}</td>
            <td>{$value.neijin}</td>
            <td>{$value.pianhou}</td>
            <td>{$value.taijiezhijin}</td>
            <td>{$value.taijiegaodu}</td>
            <td>{$value.kongshu}</td>
            <td>{$value.kongjing}</td>
            <td>{$value.duanyazhongliang}</td>
        </tr>
        {/volist}
        <!-- 复制上面的<tr>标签来添加更多行 -->  
    </tbody>  
    <tfoot>
        <tr>
            <td colspan="12">
                {$list|raw}
            </td>
        </tr>
    </tfoot>
</table>
</body>  
</html>